<template>
    <DanceList :GeneralData='RecommendListData' v-infinite-scroll="load"/>
    <div class="loading_">
        <div class="loading_more" v-if="isShow" @click="ReloadMagicDB">
        <div class="loading_more_item">
            <p class="loading_more_item_P" >记载更多</p>
        </div>
    </div >
    <div v-loading="loading"  element-loading-text="加载中..." color="#f93684"  v-else></div>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from "vue";
    
    export default defineComponent({
        name: "SpecialTopic",
    });
    </script>
    
    <script setup lang="ts">
        //创建一个首页数据
        import { DefaultDanceListItemType, RequestDefaultDanceList } from "@/api/Resource";
        import {onMounted, ref} from "vue"
        const isShow = ref(true)
        const loading =ref(true)
        const RecommendListData = ref<DefaultDanceListItemType[]>([])
        const num = ref(1)
        onMounted(() => {
        getRecommendList(0)
        })
        const getRecommendList=async(pageNum:number)=>{
    //    console.log(route.query.column);
        const re = await RequestDefaultDanceList(pageNum)
        RecommendListData.value.push(...re.content)
        isShow.value = true
    
     }
    
    const load = () => {
        isShow.value = false
        if (num.value > 1) {
            return isShow.value = true
        }
        num.value = num.value + 1
        getRecommendList(num.value)
    }
    const ReloadMagicDB = () => {
        isShow.value = false
        setTimeout(() => {
            getRecommendList(num.value)
            num.value = num.value + 1
        }, 1000)
    }
    </script>
    
    
    <style lang="scss" scoped>
        .loading_{
            min-height: 100px;
            .loading_more{
            .loading_more_item{
                .loading_more_item_P{
                    display: block;
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    color: #82858e;
                    border: 1px solid #eaecf0;
                    border-radius: 4px;
                    background: #fff;
                    text-align: center;
                    margin: 20px auto 0;
                    cursor: pointer;
                }
            }
        }
        }
        :deep(.path){
            stroke:#f93684 
        }
        :deep(.el-loading-text){
            color:#f93684 
        }
    </style>